<template>
	<view class="normal-login-container">
		<view>
			<image style="width: 100vh;height: 75rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
			</image>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.loginName" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<!-- 记住密码 -->
			<view class="mui-checkbox">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox :checked="rememberPsw" color="#0041c5" /> 记住密码
					</label>
				</checkbox-group>
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			</view>
			<view class="action-btn" v-if="is_show_visitor_button">
				<button @click="handleVisitorLogin" class="login-btn cu-btn block bg-blue lg round">游客体验</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		displayLoginButton,
		visitorLogin
	} from "@/api/login.js"

	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				loginForm: {
					loginName: "2152007888",
					password: "uFu8@HrbE7",
					deviceType: uni.getStorageSync("deviceType"),
					longitude: uni.getStorageSync("longitude"),
					latitude: uni.getStorageSync("latitude")
				},
				visitorLoginForm: {
					deviceType: uni.getStorageSync("deviceType"),
					longitude: uni.getStorageSync("longitude"),
					latitude: uni.getStorageSync("latitude")
				},
				rememberPsw: false,
				is_show_visitor_button: false
			}
		},
		methods: {
			//复选框
			checkboxChange: function(e) {

				if (e.detail.value.length == 1) {

					//获取缓存的账号
					uni.getStorageSync('HCuname', this.loginForm.loginName);
					uni.getStorageSync('HCpassw', this.loginForm.password);
					this.rememberPsw = true
				} else {
					uni.removeStorageSync('HCuname');
					uni.removeStorageSync('HCpassw');
					this.rememberPsw = false
				}
			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.loginName === "") {
					this.$modal.msgError("请输入您的账号")
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
				} else {
					this.$modal.loading("登录中，请耐心等待...")
					this.pwdLogin()
				}
			},
			// 密码登录
			pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息

				this.$store.dispatch('GetInfo').then(res => {

					//缓存账号和密码
					if (this.rememberPsw) {
						uni.setStorageSync('HCuname', this.loginForm.loginName);
						uni.setStorageSync('HCpassw', this.loginForm.password);
					} else {
						uni.removeStorageSync('HCuname');
						uni.removeStorageSync('HCpassw');
					}
					if ('school' in res) {
						this.setSchoolTabBar()
					} else {
						this.setSuperviseTabBar()
					}

				})
			},
			setSuperviseTabBar() {

				uni.setTabBarItem({
					index: 0,
					text: '视导',
					pagePath: '/pages/index/index'
				})

				uni.setTabBarItem({
					index: 1,
					text: '后台',
					pagePath: '/pages/work/index',
				})

				uni.setTabBarItem({
					index: 2,
					text: '个人',
					pagePath: '/pages/mine/index',
					success() {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			},
			displayLoginButton() {
				displayLoginButton().then(res => {
					this.is_show_visitor_button = res.is_show_visitor_button;
				})
			},
			handleVisitorLogin() {
				this.$modal.loading("登录中，请耐心等待...")
				visitorLogin(this.visitorLoginForm).then(res => {
					this.$modal.closeLoading()
					// 设置用户信息
					this.$store.dispatch('GetInfo').then(res => {
						uni.setTabBarItem({
							index: 0,
							text: '视导',
							pagePath: '/pages/visitor/index'
						})

						uni.setTabBarItem({
							index: 1,
							text: '个人',
							pagePath: '/pages/visitor/mine',
							success() {
								uni.switchTab({
									url: '/pages/visitor/index'
								})
							}
						})
						uni.setTabBarItem({
							index: 2,
							visible: false
						})
					})
				});
			},
			setSchoolTabBar() {

				uni.setTabBarItem({
					index: 0,
					text: '自查',
					pagePath: '/pages/school-index/school-index'
				})

				uni.setTabBarItem({
					index: 1,
					text: '后台',
					pagePath: '/pages/school-work/index',
				})

				uni.setTabBarItem({
					index: 2,
					text: '学校',
					pagePath: '/pages/school-mine/index',
					success() {
						uni.switchTab({
							url: '/pages/school-index/school-index'
						})
					}
				})
			}
		},
		onLoad() {
			this.displayLoginButton();
			// 如果有, 获取用户名和密码
			if (uni.getStorageSync('HCuname')) {
				this.rememberPsw = true
				this.loginForm.loginName = uni.getStorageSync('HCuname')
				this.loginForm.password = uni.getStorageSync('HCpassw')
				// this.handleLogin()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;
			// position: relative;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 35px;
				height: 45px;
			}

			.mui-checkbox {
				position: relative;
				left: 103px;

				.RememberCheck {
					margin-right: 10px;
				}
			}
		}
	}

	uni-checkbox .uni-checkbox-input {
		border-radius: 3upx !important;
		color: #ffffff !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: rgb(0, 122, 255);
		background: rgb(0, 122, 255);
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:after {
		font-size: 18px;
	}
</style>